import type { FormProps } from 'antd'
import { Button, Checkbox, Form, Input, message } from 'antd'
// import request from '../../utils/request'
// import { useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import api from '../../api/api'
import { Login } from '../../types/api'
import storage from '../../utils/storage'
import { useStore } from '../../store'
import styles from './login.module.less'
type FieldType = {
  userName?: string
  userPwd?: string
  remember?: string
}
export default function LoginFC() {
  const state = useStore()
  //   useEffect(() => {
  //     request
  //       .post('/api/users/login', {
  //         userName: 'JackMa',
  //         userPwd: '123456'
  //       })
  //       .catch(error => {
  //         console.log(error)
  //       })
  //   }, [])
  const navigate = useNavigate()

  const onFinish = async (values: Login.params) => {
    const data: string = await api.login(values)
    storage.set('token', data)
    state.updateToken(data)
    message.success('登录成功')
    navigate('/welcome')
    console.log('Success:', values, 'data:', data)
  }

  const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = errorInfo => {
    console.log('Failed:', errorInfo)
  }
  return (
    <div>
      <div className={styles.login}>
        <div className={styles.loginWrapper}>
          <div className={styles.title}>系统登录</div>
          <div>289621059</div>
          <div>836586</div>
          <Form
            name='basic'
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            style={{ maxWidth: 600 }}
            initialValues={{ remember: true }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete='off'
          >
            <Form.Item<FieldType>
              label='用户名'
              name='userName'
              rules={[{ required: true, message: 'Please input your username!' }]}
            >
              <Input />
            </Form.Item>

            <Form.Item<FieldType>
              label='密码'
              name='userPwd'
              rules={[{ required: true, message: 'Please input your password!' }]}
            >
              <Input.Password />
            </Form.Item>

            <Form.Item<FieldType> name='remember' valuePropName='checked' wrapperCol={{ offset: 8, span: 16 }}>
              <Checkbox>记住我</Checkbox>
            </Form.Item>

            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
              <Button type='primary' htmlType='submit'>
                登录
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  )
}
